<template>
  <div id='record' @click="toDetail">
    <div class='cover' style='background-position: 0px -570px' v-if='size === 100'></div>
    <div class='cover2' style='background-position: 0px -845px' v-if='size === 130'></div>

    <el-image :src='`${album.blurPicUrl}?param=${size}y${size}`'
      :style='{ "width": `${size}px`, "height": `${size}px` }' lazy />
    <div class='title'>{{ album.name }}</div>
    <div class='artName'>{{ album.artist.name }}</div>
  </div>
</template>

<script>
export default {
  name: 'Record',
  props: {
    album: {
      required: true,
    },
    size: { // 图片大小
      default: 100,
    },
  },
  methods: {
    toDetail() {
      this.$router.push({
        name: 'albumdetail',
        query: { id: this.album.id }
      })
    }
  }
}
</script>

<style scoped lang='less'>
#record {

  .cover {
    width: 120px;
    height: 100px;
    position: absolute;
    z-index: 2;
    background: url(./imgs/coverall.png);
    opacity: 0.8;
  }

  .cover2 {
    width: 150px;
    height: 130px;
    position: absolute;
    z-index: 2;
    background: url(./imgs/coverall.png);
    opacity: 0.8;
  }

  img {
    z-index: 1;
  }

  .title {
    width: 120px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .artName {
    color: #838383;
    font-size: 8px;
  }
}
</style>